import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
import TagItem from '../../ch/components/TagItem.vue';

<Meta
  title="Components/TagItem"
  component={TagItem}
  argTypes={{
    variant:    { control: { type: 'select', options: ['default', 'primary', 'active'] } },
    size:    { control: { type: 'select', options: ['sm', 'base'] } },
    icon: { control: { type: 'select', options: ['Cancel', 'Checkmark', undefined] } },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { TagItem },
  template: '<TagItem :variant="variant" :label="label" :to="to" :icon="icon" :size="size" />',
});

export const TemplateMultiple = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { TagItem },
  template:
    `
    <div>
      <hr class="separator separator--xl" />
      <ul class="list list--flex list--wrap">
        <li v-for="item in content">
          <TagItem :variant="item.variant" :label="item.label" :to="item.to" :icon="icon" />
        </li>
      </ul>
    </div>
    `
});


# TagItem


## Example

TagItems are similar to [badges](?path=/docs/components-badge--example), but they are bigger and interactive. They ensure to have the recommended minimal height of 44px for clickability.


<Canvas>
  <Story
    name="Example"
    args={{
      variant: 'default',
      label: 'Button text',
      to: 'http://www.admin.ch',
      icon: undefined,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Example" />

## List

Wrap TagItems into `ul.list--flex.list--wrap li` to display them as an horizontal list.
You can add a `hr.separator` element on top to separate the list from the rest of the content.

<Canvas>
  <Story
    name="List"
    args={{
      content: [
        {
          variant: 'default',
          label: 'Tag one',
          to: '#'
        },
        {
          variant: 'default',
          label: 'Tag two',
          to: '#'
        },
        {
          variant: 'default',
          label: 'Tag three',
          to: '#'
        },
        {
          variant: 'default',
          label: 'Tag four',
          to: '#'
        }
      ]
    }}
  >
    {TemplateMultiple.bind({})}
  </Story>
</Canvas>


## Filters

A list of TagItems can be used as a filter feature.
Attribute a `.tag-item--active` class to the selected element.
A `button` element is recommended in place of a `a` link.

<Canvas>
  <Story
    name="Filters"
    args={{
      content: [
        {
          variant: 'active',
          label: 'All',
        },
        {
          variant: 'default',
          label: 'Filter one',
        },
        {
          variant: 'default',
          label: 'Filter two',
        },
        {
          variant: 'default',
          label: 'Filter three',
        }
      ]
    }}
  >
    {TemplateMultiple.bind({})}
  </Story>
</Canvas>

